<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建合同</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h3 class="text-center text-warning">
                创建合同信息
            </h3>

            <form id="bargainForm" class="form-horizontal" role="form">
                <h4>合同基本信息</h4>

                <div class="form-group">
                    <label for="bargainname" class="col-sm-2 control-label">合同名称</label>
                    <div class="col-sm-7">
                        <input id="bargainname" required name="bargainname" type="text" class="form-control"  />
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"><span id="nameInfo"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">机构名称</label>
                    <div class="col-sm-7">
                        <input id="startDate" name="charityname" type="text" class="form-control"  />
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">购买产品类别</label>
                    <div class="col-sm-7">
                        <#list productList as product>
                            <input type="radio" name="productid" value="${product.id}">${product.productname}&nbsp;&nbsp;&nbsp;&nbsp;
                        </#list>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">服务方式</label>
                    <div class="col-sm-7">
                        <#list serviceList as service>
                            <input type="radio" name="serviceid" value="${service.id}">${service.servicename}&nbsp;&nbsp;&nbsp;&nbsp;
                        </#list>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">资源范围</label>
                    <div class="col-sm-7">
                        <#list scopeList as scope>
                            <input type="radio" name="scopeid" value="${scope.id}">${scope.scopename}&nbsp;&nbsp;&nbsp;&nbsp;
                        </#list>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <br/>
                <div class="form-group">
                    <label for="targetLand" class="col-sm-2 control-label">合同性质</label>
                    <div class="col-sm-7">
                        <select id="targetLand" name="propertyid" class="form-control">
                            <option value="-1" selected>--请选择--</option>
                            <#list proList as pro>
                                <option value="${pro.id}">${pro.proname}</option>
                            </#list>
                        </select>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="targetLand" class="col-sm-2 control-label">合同类型</label>
                    <div class="col-sm-7">
                        <select id="targetLand" name="styleid" class="form-control">
                            <option value="-1" selected>--请选择--</option>
                            <#list styleList as style>
                                <option value="${style.id}">${style.stylename}</option>
                            </#list>
                        </select>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">合同经办人</label>
                    <div class="col-sm-7">
                        <input id="startDate" name="operator" type="text" class="form-control"  />
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">合同联系人</label>
                    <div class="col-sm-7">
                        <input id="startDate" name="connector" type="text" class="form-control" value="负责机构签合同的联系人" />
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">合同总金额</label>
                    <div class="col-sm-3">
                        <input id="startDate" name="count" type="number" class="form-control"  />
                    </div>
                    <div class="col-sm-1">元</div>
                    <label for="targetLand" class="col-sm-6 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="targetLand" class="col-sm-2 control-label">付款方式</label>
                    <div class="col-sm-7">
                        <select id="targetLand" name="paystyle" class="form-control">
                            <option value="-1" selected>--请选择--</option>
                            <#list payList as pay>
                                <option value="${pay.id}">${pay.payname}</option>
                            </#list>
                        </select>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>
                <br/>

                <div class="form-group">
                    <label for="contracttime" class="col-sm-2 control-label">签约时间</label>
                    <div class="col-sm-3">
                        <input id="contracttime" name="contracttime" type="date" class="form-control"  />
                    </div>
                    <label for="targetLand" class="col-sm-8 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="endDate" class="col-sm-2 control-label">合同期限</label>
                    <div class="col-sm-3">
                        <input id="begintime" name="begintime" type="date" class="form-control"  />
                    </div>
                    <div class="col-sm-1">至</div>
                    <div class="col-sm-3">
                        <input id="endtime" name="endtime" type="date" class="form-control"  />
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">负责代理</label>
                    <div class="col-sm-7">
                        <input id="startDate" name="agency" type="text" class="form-control"  value="代理机构名称"/>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>
                <br/>
                <h4>合同相关信息</h4>
                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">博看签字人</label>
                    <div class="col-sm-7">
                        <input id="startDate" name="bosign" type="text" class="form-control"  />
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">博看签字盖章</label>
                    <div class="col-sm-7">
                        <input id="startDate" name="bostamp" type="text" class="form-control"  value="公司名称"/>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">机构签字人</label>
                    <div class="col-sm-7">
                        <input id="startDate" name="jisign" type="text" class="form-control"  />
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">机构签字盖章</label>
                    <div class="col-sm-7">
                        <input id="startDate" name="jistamp" type="text" class="form-control"  value="机构客户名称"/>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="remark" class="col-sm-2 control-label">备注</label>
                    <div class="col-sm-7">
                        <textarea id="remark" name="remark"  class="form-control" ></textarea>
                    </div>
                    <label for="remark" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="tripPic" class="col-sm-2 control-label">合同扫描件</label>
                    <div class="col-sm-10">
                        <img id="img" src="" width="100px" height="100px"/>
                        <input id="hiddenPic" name="file" type="hidden" />
                        <input id="tripPic" onchange="preview(this)" type="file" class="form-control" />
                        <button type="button" class="btn btn-default" onclick="uploadPic()">上传图片</button>
                        <span id="picSpan"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="targetLand" class="col-sm-2 control-label">审核状态</label>
                    <div class="col-sm-7">
                        <select id="targetLand" name="checkstatus" class="form-control">
                            <option value="-1" selected>--请选择--</option>
                            <#list checkList as check>
                                <option value="${check.id}">${check.checkname}</option>
                            </#list>
                        </select>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <div class="form-group">
                    <label for="startDate" class="col-sm-2 control-label">合同到期提醒</label>
                    <div class="col-sm-7">
                        <#list remindList as remind>
                            <input type="radio" name="remind" value="${remind.id}">${remind.remindname}&nbsp;&nbsp;&nbsp;&nbsp;
                        </#list>
                    </div>
                    <label for="targetLand" class="col-sm-3 control-label"></label>
                </div>

                <span id="addSpan"></span>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" onclick="bargainSub()" class="btn btn-info">添加</button>
                        <button type="button" onclick="history.back()" class="btn btn-info">返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/js/jquery.js"></script>
<script>

    //页面加载完毕
    $(function () {
        //异步校验合同名称
        $("#bargainname").blur(function () {
            var bargainname = $(this).val();
            $.ajax({
                url: "/bargain/checkBargainName",
                data: "bargainname=" + bargainname,
                type: "post",
                dataType: "json",
                success: function (result) {
                    if (result.code == 0) {
                        $("#nameInfo").html(result.msg).css("color", "green");
                    } else {
                        $("#nameInfo").html(result.msg).css("color", "red");
                    }
                }
            })
        })
    });

    // 添加全部信息
    function bargainSub(){
        //1. 获取form表单中的全部内容
        var data = $("#bargainForm").serialize(); // 将携带name属性的表单项拼接为key=value&key=value..
        //2. 发送ajax请求到后台,并传递全部的参数.
        $.post(
            "/bargain/addBargain",
            data,
            function(result){
                if(result.code == 0){
                    alert("添加成功");
                    location.href = "/bargain/findAll";
                }else{
                    $("#addSpan").html(result.msg).css("color","red");
                }
            },
            "json"
        );
    }

    // 上传文件
    function uploadPic(){
        //1. 创建FormData对象
        var formData = new FormData();
        //2. 向formData中封装文件上传项.
        formData.append("file",$("#tripPic")[0].files[0]);
        //3. 发送ajax请求.
        $.ajax({
            url: "/upload/pic",
            data: formData,
            type: "POST",
            dataType: "json",
            success: function(result){
                if(result.code == 0){
                    $("#img").attr("src",result.data);
                    $("#hiddenPic").val(result.data);
                    $("#picSpan").html(result.msg).css("color","red");
                }else{
                    $("#picSpan").html(result.msg).css("color","red");
                }
            },
            erorr: function(){
                alert("服务器爆炸,请灭火!!!");
            },
            contentType: false,
            processData: false
        });
    }

    // 动态显示图片
    function preview(file){
        if (file.files && file.files[0]){
            reader = new FileReader();
            reader.onload = function(evt){
                $("#img").attr("src",evt.target.result);
            }
            reader.readAsDataURL(file.files[0]);
        }
        /*else{
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }*/
    }


</script>
</body>
</html>